<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1. 导入文件art-template -->
    <script src="./js/art-template.js"></script>
    <script src="./js/jquery.js"></script>
</head>

<body>
    <div id="main"></div>
    <!--3. 定义模板 -->
    <script type="text/html" id="tpl-user">
        <h1>{{name}}---------{{age}}</h1>
        <ul>
            {{each arr}}
            <li>{{$value}}</li>
            {{/each}}
        </ul>
        <div>{{@h3s}}</div>
        <div>
            {{if flage===111}}
            flage的值是111{{else if flage===333}}
            flage的值是333{{/if}}
        </div>
        <div>
            {{regDate| dateT}}
        </div>
    </script>

    <script>
        // 定义处理时间的过滤器
        var date = new Date();
        template.defaults.imports.dateT = function (date) {
            const y = date.getFullYear();
            const m = date.getMonth() + 1;
            const d = date.getDate();
            return y + '-' + m + '-' + d;
        }
        // <!--2. 定义数据 -->
        var datas = { name: "乌龙茶", age: 1000, arr: ['书记', '菜答', '写代码'], h3s: '<h3>这是一个h3</h3>', flage: 111, regDate: new Date() };
        // 4. 调用函数template
        var htmlStr = template('tpl-user', datas);
        // 5. 渲染html结构
        $('#main').html(htmlStr);
    </script>
</body>

</html>